<template>
    <!-- This section should be hidden by default and shown when there are todos -->
    <section class="main">
        <input id="toggle-all" class="toggle-all" type="checkbox" />
        <label for="toggle-all" @click="allTrue">Mark all as complete</label>
        <ul class="todo-list">
            <li :class="{ completed: v.status }" v-for="(v, k) in mainStore.todoList">
                <div class="view">
                    <input class="toggle" type="checkbox" v-model="v.status" @click="modfiy(v, k)" />
                    <label>{{ v.title }}</label>
                    <button class="destroy" @click="deleteTodo(v.id, k)"></button>
                </div>
                <input class="edit" value="Create a TodoMVC template" />
            </li>
        </ul>
    </section>
</template>
<script lang="ts" setup>
import axios from 'axios'
import { onMounted } from 'vue';
//导入容器
import { useMainStore } from '../store/index'
//获取实例容器
const mainStore = useMainStore()
//全选
var Tag = true
const allTrue = function () {
    console.log(111);
    mainStore.todoList.forEach((item) => {
        if (Tag) {
            item.status = true
        } else {
            item.status = false
        }
        axios.put('http://127.0.0.1:8000/todoList/' + item.id, item)
    })
    Tag=!Tag

}

//修改状态值
var modfiy = async function (TodoStatus, key) {
    mainStore.todoList[key].status = !mainStore.todoList[key].status
    // console.log(mainStore.todoList[key]);
    var data = await axios.put('http://127.0.0.1:8000/todoList/' + TodoStatus.id, mainStore.todoList[key])
}
//删除
const deleteTodo = async function (deleteId, key) {
    var data = await axios.delete('http://127.0.0.1:8000/todoList/' + deleteId)
    if (data.status == 200) {
        mainStore.deletetodo(key)
    }
}
//渲染页面
onMounted(async () => {
    //从服务器获取到数据
    var { data } = await axios.get('http://127.0.0.1:8000/todoList')
    //获取到数据之后，直接存入到pinia 中
    //模板中可以获取到容器的数据进行循环遍历，js这里就不用存储数据
    //调用容器的实例对象，将服务器的数据添加到容器中
    //调用容器的 actions 方法的 todoChang
    mainStore.todoChang(data)

})
</script>

<style>
</style>